<template>
  <div class="zui-LPN-keyboard-wrap" :style="{ transform: show ? 'translateY(0)' : 'translateY(100%)' }">
    <header class="header"></header>
    <div class="content">
      <div class="keys-wrap">
        <div class="province-wrap" v-if="inputPosition == 0">
          <ul>
            <li class="key-wrap" v-for="(name, idx) in provinces" :key="idx">
              <span class="key" @click.stop="onKeyClick(name)">{{ name }}</span>
            </li>
          </ul>
        </div>
        <div class="number-letter-wrap" v-else>
          <ul class="numbers">
            <li class="key-wrap" v-for="(number, idx) in numbers" :key="idx">
              <span class="key" @click.stop="onKeyClick(number)">{{ number }}</span>
            </li>
          </ul>
          <ul class="letters">
            <li class="key-wrap" v-for="(letter, idx) in letters" :key="idx">
              <span class="key" @click.stop="onKeyClick(letter)">{{ letter }}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="sidebar">
        <div class="key-wrapper">
          <div
            role="button"
            @click.stop="onBackspaceClick()"
            tabindex="0"
            class="van-key van-key--large van-key--delete"
          >
            <svg class="van-key__delete-icon" viewBox="0 0 32 22">
              <path
                d="M28 0a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H10.4a2 2 0 0 1-1.4-.6L1 13.1c-.6-.5-.9-1.3-.9-2 0-1 .3-1.7.9-2.2L9 .6a2 2 0 0 1 1.4-.6zm0 2H10.4l-8.2 8.3a1 1 0 0 0-.3.7c0 .3.1.5.3.7l8.2 8.4H28a2 2 0 0 0 2-2V4c0-1.1-.9-2-2-2zm-5 4a1 1 0 0 1 .7.3 1 1 0 0 1 0 1.4L20.4 11l3.3 3.3c.2.2.3.5.3.7 0 .3-.1.5-.3.7a1 1 0 0 1-.7.3 1 1 0 0 1-.7-.3L19 12.4l-3.4 3.3a1 1 0 0 1-.6.3 1 1 0 0 1-.7-.3 1 1 0 0 1-.3-.7c0-.2.1-.5.3-.7l3.3-3.3-3.3-3.3A1 1 0 0 1 14 7c0-.3.1-.5.3-.7A1 1 0 0 1 15 6a1 1 0 0 1 .6.3L19 9.6l3.3-3.3A1 1 0 0 1 23 6z"
                fill="currentColor"
              ></path>
            </svg>
          </div>
        </div>
        <div class="key-wrapper">
          <div
            role="button"
            @click.stop="onClearClick()"
            tabindex="0"
            class="van-key van-key--large"
            style="font-size: 16px"
          >
            清空
          </div>
        </div>
        <div class="key-wrapper">
          <div role="button" @click.stop="onSearchClick()" tabindex="0" class="van-key van-key--blue van-key--large">
            查询
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import keys from './keys'
import { ref } from 'vue'
export default {
  emits: ['update:modelValue', 'keyClick'],
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    show: {
      type: Boolean,
      default: false
    },
    // 车牌种类 0：普通，1：新能源车牌
    type: {
      type: Number,
      default: 0
    },
    // 当前输入序号
    position: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    const input = ref(props.modelValue)
    const inputPosition = ref(props.position)
    return { input, inputPosition }
  },
  data() {
    return {
      provinces: keys.provinces,
      letters: keys.letters,
      numbers: keys.numbers
    }
  },
  watch: {
    input(value) {
      this.$emit('update:modelValue', value)
    },
    position(value) {
      this.inputPosition = value
    },
    inputPosition(value) {
      this.$emit('position', value)
    },
    show(value) {}
  },
  methods: {
    onKeyClick(key) {
      // 普通车牌最多7个字符，超过后输入字符自动被抛弃
      if (this.type == 0 && this.input && this.input.length >= 7) {
        return
      }
      // 新能源车牌最多7个字符，超过后输入字符自动被抛弃
      if (this.type == 1 && this.input && this.input.length >= 8) {
        return
      }

      this.input = this.input + key
      this.inputPosition += 1
      const [input, position] = [this.input, this.inputPosition]
      this.$emit('input', { key, input, position })
      this.$emit('keyClick', { key })
    },
    onBackspaceClick() {
      if (this.inputPosition == 0) {
        return
      }
      this.inputPosition -= 1
      this.input = this.input.substring(0, this.inputPosition)
      this.$emit('input', { key: 'backspace', input: this.input, position: this.inputPosition })
      this.$emit('keyClick', { key: 'backspace' })
    },
    onClearClick() {
      this.input = ''
      this.inputPosition = 0
      this.$emit('input', { key: 'clear', input: this.input, position: this.inputPosition })
      this.$emit('keyClick', { key: 'clear' })
    },
    onSearchClick() {
      this.$emit('search', { key: 'search', input: this.input, position: this.inputPosition })
      this.$emit('keyClick', { key: 'search' })
    }
  }
}
</script>
<style lang="scss" scoped>
.zui-LPN-keyboard-wrap {
  border-radius: $size-border-radius $size-border-radius 0 0;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #f2f3f5;
  user-select: none;
  padding-bottom: 22px;
  transition: all 0.2s ease-in-out;
  transform: translateY(100%);
  z-index: 999;
  .content {
    display: flex;
    padding: 6px 0 0 6px;
    box-sizing: border-box;
    width: 100%;

    .key-wrap {
      position: relative;
      flex: 1;
      flex-basis: 12%;
      box-sizing: border-box;
      padding: 0 6px 6px 0;
      .key {
        display: flex;
        align-items: center;
        justify-content: center;
        height: var(--van-number-keyboard-key-height);
        font-size: var(--van-number-keyboard-key-font-size);
        line-height: 1.5;
        background: var(--van-number-keyboard-key-background-color);
        border-radius: var(--van-border-radius-lg);
        cursor: pointer;
        min-width: 21px;
      }
      .key:active {
        background-color: var(--van-number-keyboard-key-active-color) !important;
      }
    }

    .keys-wrap {
      flex-basis: 84%;
      .province-wrap {
        ul {
          display: flex;
          flex-wrap: wrap;
        }
      }

      .number-letter-wrap {
        display: flex;
        flex-direction: column;
        .numbers {
          display: flex;
        }
        .letters {
          display: flex;
          flex-wrap: wrap;
          .key-wrap {
            flex-basis: 10%;
          }
        }
      }
    }
    .sidebar {
      display: flex;
      flex-direction: column;
      flex-basis: 16%;
      min-width: 40px;

      .key-wrapper {
        .van-key:not(.van-key--blue):active {
          background-color: var(--van-number-keyboard-key-active-color);
        }
        .van-key--blue:active {
          opacity: var(--van-active-opacity);
        }
      }
    }
  }

  .key-wrapper {
    position: relative;
    flex: 1;
    flex-basis: 33%;
    box-sizing: border-box;
    padding: 0 6px 6px 0;
  }
}
</style>
